<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>情感对话平台</title>
    <meta name="description" content="一个为你而生的AI伙伴，随时倾听，深度理解。" />
    <link rel="stylesheet" href="style.css">
</head>
<body class=""> <header class="nav">
    <div class="nav-inner">
        <a class="logo" href="#">
            <img src="images/logo.svg" alt="情感对话平台 Logo">
        </a>
        <nav class="nav-links">
            <a href="#features">核心特性</a>
            <a href="#" id="nav-start-button">立即开始</a>
        </nav>
    </div>
</header>

<main>
    <section class="hero">
        <div class="glow" aria-hidden="true"></div>
        <div class="hero-inner">
            <div class="eyebrow reveal">随时在你身边</div>
            <h1 class="title reveal" style="transition-delay:.06s">不止是AI，更是伙伴</h1>
            <p class="subtitle reveal" style="transition-delay:.12s">
                我们相信，每一次对话都蕴含力量。在这里，你可以自由傾訴，探索內心，找到共鳴與理解。
            </p>
            <div class="cta reveal" style="transition-delay:.18s">
                <button id="start-chat-button" class="btn primary">开启对话</button>
            </div>
        </div>
    </section>

    <section id="features" class="grid">
        <article class="card reveal">...</article>
        <article class="card reveal" style="transition-delay:.1s">...</article>
        <article class="card reveal" style="transition-delay:.2s">...</article>
        <article class="card reveal" style="transition-delay:.3s">...</article>
    </section>
</main>

<footer>
    <div class="foot-inner">
        <small>© <span id="y"></span> 情感对话平台. 保留所有权利.</small>
        <div class="foot-links">
            <a href="#">隐私政策</a>
            <a href="#">服务条款</a>
        </div>
    </div>
</footer>

<div id="auth-modal" class="auth-modal">
    <div class="modal-content">
        <span class="close-btn">&times;</span>
        <div class="auth-tabs">
            <button class="tab-link active" data-mode="login">登录</button>
            <button class="tab-link" data-mode="register">注册</button>
        </div>
        <form id="auth-form">
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group confirm-password-group" style="display: none;">
                <label for="confirm-password">确认密码</label>
                <input type="password" id="confirm-password" name="confirm-password">
            </div>
            <button type="submit" class="btn primary btn-submit">登录</button>
        </form>
        <p class="switcher-text">
            还没有账户？ <a href="#" class="switcher-link">立即注册</a>
        </p>
    </div>
</div>


<script>
    // 设置年份
    document.getElementById('y').textContent = new Date().getFullYear();

    // 元素入场动画
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });
    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

    // 3D 卡片倾斜动效
    const cards = document.querySelectorAll('.card');
    cards.forEach(card => {
        card.addEventListener('mousemove', e => {
            const rect = card.getBoundingClientRect();
            const x = e.clientX - rect.left - rect.width / 2;
            const y = e.clientY - rect.top - rect.height / 2;
            const rotateX = -y / 20;
            const rotateY = x / 20;
            card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
        });
        card.addEventListener('mouseleave', () => {
            card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
        });
    });

    // --- 全新：认证模态窗口逻辑 ---
    const openModalButtons = [document.getElementById('start-chat-button'), document.getElementById('nav-start-button')];
    const authModal = document.getElementById('auth-modal');
    const closeModalBtn = authModal.querySelector('.close-btn');
    const authForm = document.getElementById('auth-form');
    const tabs = authModal.querySelectorAll('.tab-link');
    const confirmPasswordGroup = authModal.querySelector('.confirm-password-group');
    const submitBtn = authModal.querySelector('.btn-submit');
    const switcherLink = authModal.querySelector('.switcher-link');
    const switcherText = authModal.querySelector('.switcher-text');

    let currentMode = 'login'; // 'login' or 'register'

    function setAuthMode(mode) {
        currentMode = mode;
        tabs.forEach(tab => {
            tab.classList.toggle('active', tab.dataset.mode === mode);
        });

        if (mode === 'login') {
            confirmPasswordGroup.style.display = 'none';
            authForm.querySelector('#confirm-password').removeAttribute('required');
            submitBtn.textContent = '登录';
            switcherText.innerHTML = '还没有账户？ <a href="#" class="switcher-link">立即注册</a>';
        } else {
            confirmPasswordGroup.style.display = 'block';
            authForm.querySelector('#confirm-password').setAttribute('required', 'true');
            submitBtn.textContent = '创建账户';
            switcherText.innerHTML = '已有账户？ <a href="#" class="switcher-link">立即登录</a>';
        }
    }

    // 打开模态窗口
    openModalButtons.forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.preventDefault();
            authModal.style.display = 'flex';
            document.body.classList.add('modal-open');
            setTimeout(() => authModal.classList.add('visible'), 10);
        });
    });

    // 关闭模态窗口
    function closeModal() {
        authModal.classList.remove('visible');
        document.body.classList.remove('modal-open');
        setTimeout(() => authModal.style.display = 'none', 300); // 等待动画结束
    }
    closeModalBtn.addEventListener('click', closeModal);
    authModal.addEventListener('click', (e) => {
        if (e.target === authModal) { // 点击背景关闭
            closeModal();
        }
    });

    // 切换模式
    tabs.forEach(tab => {
        tab.addEventListener('click', () => setAuthMode(tab.dataset.mode));
    });
    switcherText.addEventListener('click', (e) => {
        if (e.target.classList.contains('switcher-link')) {
            e.preventDefault();
            setAuthMode(currentMode === 'login' ? 'register' : 'login');
        }
    });

    // 表单提交
    authForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const formData = new FormData(authForm);
        const data = Object.fromEntries(formData.entries());

        if (currentMode === 'register' && data.password !== data['confirm-password']) {
            alert('两次输入的密码不一致！');
            return;
        }

        console.log(`正在以 ${currentMode} 模式提交:`, data);
        alert(`${currentMode === 'login' ? '登录' : '注册'}成功！(详情请看控制台)`);
        closeModal();
    });

    // 初始设置为登录模式
    setAuthMode('login');

</script>
</body>
</html>